Annatommy of a click
JSConf JP 2019
Benjamin Gruenbaum
many companies don't have E2E tests
The browser event model
Event Target
addEventListener
removeEventListener
dispatchEvent
How Events Work
capture phase (moving down, html, body, header, button)
target receives event
bubbling phase (moving up. button, header, body, html)
event delegation
Most UI systemms do this.
Stopping Propagation
e.stopPropagationn()
React
synnthetic events system
Normalization in React
Angular/Svelte/Vue reasonable thing here
they listen to events directly
Before Chrome Fires the Event
https://cs.chromium.org
Chromium Wiki is excellent resource
The Debugger
Devtools protocol is based on WebSocket
Seleniumm
HTTP REST JSON protocol
Puppeteer
just a websocket client
Testim
Cypress
dispatches DOM events directly
flakey